<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    /**
     * 7.25今日录屏
        1.说一下分配权限的实现思路(回显,默认展示,递归拿到最后id的思路等)
        2.面试题 js的数据类型 函数节流和函数防抖 事件委托
        今日作业:
        1.课上讲的都要写,写完写商品管理模块(从后往前写)
        2.总结早上讲的js面试题,敲一敲(原生实现bind,jquery封装ajax原理,深浅拷贝）
        3.学习较好的同学可以尝试递归把list数据转换成tree数据(奎哥面试题有案例)
     * 
     * */
    // ajax原理
    // var xhr=new XMLHttpRequest()
    // // 与服务器建立连接
    // xhr.open('get','../data/1.json',true)
    // //发送请求
    // xhr.send()
    // xhr.onreadystatechange=function(){
    //     if(xhr.readyState==4){
    //         if(xhr.status==200){
    //             console.log(xhr.responseText);
    //         }else{
    //             console.log(xhr.status);
    //         }
    //     }
    // }



    
    //简单封装ajax
    // function ajax(url, fnSucc, fnFaild) {
    //     var oAjax = null
    //     if (window.XMLHttpRequest) {
    //         // 创建ajax对象
    //         oAjax = new XMLHttpRequest()
    //     } else {
    //         oAjax = new ActiveXObject('Microsoft.XMLHTTP')
    //     }
    //     // 建立连接
    //     oAjax.open('get', url, true)
    //     // 发送请求
    //     oAjax.send()
    //     // 接收服务器返回的数据
    //     oAjax.onreadystatechange = function () {
    //         if (oAjax.readyState == 4) {  //请求成功
    //             if (oAjax.status == 200) {
    //                 fnSucc(oAjax.responseText) //成功回调
    //             } else {
    //                 fnFaild(oAjax.status) //失败回调
    //             }
    //         }
    //     }
    // }
    // ajax('../data/2.json', function (res) {//成功方法
    //     console.log(res);
    // }, function (err) {//失败方法
    //     console.log(err);
    // }
    // )


    // js的数据类型
    /**
     * js的数据类型有两种分别是基本数据类型和复杂数据类型
     * 两种类型存储的位置不同
     * 基本数据类型存储在栈中
     * 复杂数据类型存储在堆中
     * 基本数据类型有：number string boolean undefined null symbol
     * 复杂数据类型有：array  object function
    */
        // 函数节流和函数防抖
        /***
         *两者都是优化代码执行频率 
          定义：节流是n秒内只执行一次 n秒内重复触发只执行一次  防抖是n秒后在执行 重复触发事件时 n秒后在执行
          相同点：都是可以用定时器来实现的 主要目的就是降低执行率 节省计算资源
          不同点：函数防抖是连续操作任务结束后处理回调，利用定时器来执行 函数节流是一段时间连续触发任务是只执行最后一次
          应用场景：防抖 搜索框搜索时的搜索事件 节流滚动加载，加载更多或到底部监听  
         */
        // 什么是事件代理 应用场景
        /*
            事件代理就是把一个元素的响应事件的函数委托给另一个元素  
            事件委托就是把一个或者一组元素的事件委托给他的父级元素或者更外层元素
            真正绑定事件的并不是目标元素
            应用场景
                
        */
</script>